import React, { Suspense, useState } from "react";
import styles from "./Index.module.less";
import FontIcon from "@/components/public/fontIcon/Index";
import Password from "./components/password/Index";
import Email from "./components/email/Index";

const VIEWS = {
  password: {
    id: crypto.randomUUID(),
    form: Password,
    icon: "icon-user",
    color: "#ffa254",
  },
  email: {
    id: crypto.randomUUID(),
    form: Email,
    icon: "icon-email",
    color: "#ffa254",
  },
};
export default function Index() {
  const [current, setCurrent] = useState<"password" | "email">("password");
  let active = VIEWS[current].form;
  const list = Object.keys(VIEWS).map((item) => {
    const key = item as keyof typeof VIEWS; // 类型断言
    return {
      key: key,
      id: VIEWS[key].id,
      icon: VIEWS[key].icon,
      color: VIEWS[key].color,
    };
  });

  const changeView = (key: keyof typeof VIEWS) => {
    setCurrent(key as "password" | "email");
    active = VIEWS[key].form;
  };
  return (
    <div className={styles.login_container}>
      <div className={styles.left}>
        <div className={styles.form_box}>
          <div className={styles.icon}>
            <FontIcon name="icon-diannao" />
          </div>
          <h1>管理系统</h1>
          <p>欢迎回来，请登录您的账号</p>
          <Suspense fallback="Loading...">{React.createElement(active, { key: current })}</Suspense>

          <div className={styles.Login_method}>
            {list.map((item) => {
              if (item.key === current) return null;
              return (
                <FontIcon
                  className={`${styles.icon} ${styles[item.icon]}`}
                  key={item.id}
                  name={item.icon}
                  color={item.color}
                  onClick={() => changeView(item.key)}
                />
              );
            })}
          </div>
        </div>
        <div className={styles.footer}>© 2025 管理系统 - 版权所有</div>
      </div>
      <div className={styles.right}>
        <h1>欢迎使用管理系统</h1>
        <p>高效、安全、专业的企业级管理平台</p>
      </div>
    </div>
  );
}
